<template>
    <div class="view">
        <nav-bar @clickLeft="back">
            <div class="chat-title">
                <div class="chat-name ellipsis">{{chatTargetInfo.nickName||'聊天'}}</div>
                <div class="chat-sub" v-if="chatTargetInfo.type===3">专家咨询</div>
            </div>
            <div class="back" slot="left">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="nav-target-face" slot="right" v-if="chatTargetInfo.avatar" @click="clickFace(false)">
                <div class="nav-target-face-image" :style="{'background-image':`url(${chatTargetInfo.avatar.file_path}?imageView2/0/h/55)`}"></div>
            </div>
        </nav-bar>
        <div class="chat-container" @click="hideToolsBar" :class="(showGiftTool||showEmotionTool||showMicrophoneTool?'chat-container-up':'')">
            <div class="socket-disconnect" @click="socketReconnect" v-if="!socket.isConnected">已从聊天室断开，点击重连</div>
            <cube-scroll class="chat-container-scroll" ref="chatContainerScroll" :data="chatListArray">
                <div class="chat-log-wrap">
                    <div class="chat-log-flex" :id="'msg'+key" :style="{order:item.timeStamp}" v-for="(item,key) in chatDetailListObject" :key="key">
                        <chat-box @clickMsg="clickMsg(key)" @clickFace="clickFace(item.isSelf)" :type="item.type" :text="item.text | decodeHtml" :isSelf='item.isSelf' :faceUrl="item.avatar"
                                  @loadImage="tryScrollToBottom" :thisTime="item.timeStamp">
                            <div class="msg-gift-content" slot="content" v-if="item.type === 101">
                                <div class="msg-gift-picture">
                                    <img :src="item.text.image.file_path+'?imageView2/0/h/150'">
                                </div>
                                <div class="msg-gift-text animated infinite pulse slow" v-if="!item.isSelf">{{chatTargetInfo.nickName}}送你一个<span>【{{item.text.name}}】</span>,送个礼物感谢TA吧</div>
                                <div class="msg-gift-text animated infinite pulse slow" v-else>你送给 {{chatTargetInfo.nickName}} 一个<span>【{{item.text.name}}】</span></div>
                            </div>
                            <div class="msg-status" slot="status">
                                <cube-loading :size="20" v-if="item.abnormal === 1"></cube-loading>
                            </div>
                        </chat-box>
                    </div>
                </div>
                <div class="msg-end" id="msgEnd"></div>
            </cube-scroll>

        </div>
        <div class="chat-tools" :class="(showEmotionTool||showMicrophoneTool?'chat-tools-unfold':'')">
            <div class="chat-tools-disable" @click="socketReconnect" v-if="!socket.isConnected"></div>
            <div class="chat-tools-input">
                <form action="" @submit.prevent="onSubmit" class="chat-tools-form">
                    <input ref="chatInput" @focus="chatInputFocus" @blur="chatInputBlur" type="text" class="chat-tools-input-wrap" v-model="chatText">
                    <div class="chat-msg-submit" @click="onSubmit">发送</div>
                </form>
            </div>
            <div class="chat-tools-other">
                <div class="chat-tools-other-item" v-if="devide.status" @click="showPhoto('PHOTOLIBRARY')">
                    <i class="iconfont icon-tupian"></i>
                </div>
                <div class="chat-tools-other-item" v-else>
                    <i class="iconfont icon-tupian">
                        <input type="file" accept="image/*" class="input-choose-picture" @change='chooseImageFiles'></input>
                    </i>
                </div>
                <div class="chat-tools-other-item" :class="{'chat-tools-other-item-active animated rubberBand':showEmotionTool}">
                    <i class="iconfont icon-biaoqing" @click="showEmotion"></i>
                </div>
                <div class="chat-tools-other-item" v-if="devide.status">
                    <i class="iconfont icon-paizhao" @click="showPhoto('CAMERA')"></i>
                </div>
                <div class="chat-tools-other-item" :class="{'chat-tools-other-item-active animated rubberBand':showGiftTool}" v-if="chatTargetInfo.type!==3">
                    <i class="iconfont icon-gift" @click="showGift"></i>
                </div>
                <!--                                <div class="chat-tools-other-item">-->
                <!--                                    <i class="iconfont icon-weizhi" @click="showLocation"></i>-->
                <!--                                </div>-->
                <div class="chat-tools-other-item">
                    <i class="iconfont icon-liaotian" @click="toChatLog"></i>
                </div>
            </div>
            <div class="chat-tool-box">
                <div class="chat-emoji-tool chat-fixed-tool" :style="'z-index:'+toolLevelList[2]">
                    <cube-scroll>
                        <emoji-picker ref="emojiPicker" @pickEmotion="selectEmotion"></emoji-picker>
                    </cube-scroll>
                </div>
            </div>
            <div class="picker-gift" :class="{'picker-gift-show':showGiftTool}">
                <div class="picker-gift-head">
                    选择礼物赠送
                </div>
                <div class="picker-gift-wrap">
                    <div class="picker-gift-box">
                        <cube-scroll ref="giftScroll" :data="giftList" direction="horizontal" class="horizontal-scroll-list-wrap">
                            <ul class="list-wrapper flex">
                                <li class="item-outer flex" v-for="(item) in giftList">
                                    <div class="gift-item" v-for="(gift) in item" :key="gift.id" @click="selectGift(gift.id)" :class="{'gift-item-selected':gift.id === giftSelectId}">
                                        <img class="gift-picture" :src="gift.image.file_path+'?imageView2/0/h/65'">
                                        <div class="gift-name ellipsis">{{gift.name}}</div>
                                        <div class="gift-price iconfont icon-yuanbao">{{gift.price}}</div>
                                    </div>
                                </li>
                            </ul>
                        </cube-scroll>
                        <!--                        <div class="gift-item" v-for="(gift) in giftList" :key="gift.id" @click="selectGift(gift.id)" :class="{'gift-item-selected':gift.id === giftSelectId}">-->
                        <!--                            <img class="gift-picture" :src="gift.image.file_path">-->
                        <!--                            <div class="gift-name">{{gift.name}}</div>-->
                        <!--                            <div class="gift-price iconfont icon-yuanbao">{{gift.price}}</div>-->
                        <!--                        </div>-->
                    </div>
                </div>
                <div class="picker-gift-action">
                    <div class="picker-gift-balance">
                        <span class="number iconfont icon-yuanbao">{{user.money}}</span>
                        <span class="recharge">充值</span>
                        <span class="cubeic-arrow"></span>
                    </div>
                    <div class="picker-gift-btn" @click="giveGift" :class="{'picker-gift-btn-active':giftSelectId>=0}">立即赠送</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import NavBar from "@/components/aui/NavBar.vue";
    import EmojiPicker from "@/components/aui/EmojiPicker.vue";
    import ChatBox from "@/components/aui/ChatBox.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import ChatMessageEntity from "@/entity/ChatMessageEntity";

    import CommonUnit from "@/unit/CommonUnit";
    import {InterfacePosition} from "@/interface/InterfacePosition";
    import {clearPosition} from "@/store/dispatches";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";
    import ChatMessageUnit from "@/unit/ChatMessageUnit";


    @Component({
        components: {
            NavBar, EmojiPicker, ChatBox
        },
    })
    export default class ChatDetail extends Scene {

        private loadTime: number = Date.parse(String(new Date())) / 1000;

        private chatText: any = "";
        private showEmotionTool: boolean = false;
        private showMicrophoneTool: boolean = false;
        private showGiftTool: boolean = false;
        private toolLevelList: number[] = [10, 1, 1, 1, 1];

        private tilesSrc: string = "";
        private chatDetailList: any[] = [];

        private chatDetailListObject: any = {};
        private imageFiles: any[] = [];
        private giftList: any[] = [];
        private giftSelectId: number = -1;

        private chatTargetInfo: any = {};
        private page: number = 1;
        private size: number = 10;
        private chatLogList: any[] = [];
        private alwaysBottom: boolean = true;

        private chatScrollOptions: any = {
            pullDownRefresh: {
                txt: "加载聊天记录"
            }
        };

        private get chatListArray(): any[] {
            this.chatDetailList.push(this.socket.message);
            this.clearNoRead();
            if (this.socket.message.type === "say" || this.socket.message.type === "say_img" || this.socket.message.type === "gift") {
                console.log((String(this.socket.message.data.fromid) === String(this.toId)));
                console.log((String(this.socket.message.data.toid) === String(this.toId)));
                if ((String(this.socket.message.data.fromid) === String(this.toId)) || (String(this.socket.message.data.toid) === String(this.toId))) {
                    const chatMessageEntity = this.logToItem(this.socket.message.data);
                    this.chatDetailListObject = Object.assign(this.chatDetailListObject, chatMessageEntity);
                    setTimeout(() => {
                        (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 0, false, false);
                    }, 100);
                }
            }
            return this.chatDetailList;
        };

        private get toId(): string {
            return String(this.$route.query.toId || "");
        }

        @State("SocketStore")
        private socket!: InterfaceSocket;

        @State("DeviceStore")
        private devide!: any;

        @Action("sendMessage")
        private socketSendMessage!: Function;

        @State("PositionStore")
        private position!: InterfacePosition;

        private get storePosition(): any {
            let TileLnglatTransform = require("tile-lnglat-transform");
            let TileLnglatTransformGaode = TileLnglatTransform.TileLnglatTransformGaode;
            if (this.position.selected) {
                const tilesXY = TileLnglatTransformGaode.lnglatToTile(this.position.longitude, this.position.latitude, this.position.zoom);
                // const tilesSrc = `http://wprd03.is.autonavi.com/appmaptile?style=7&x=${tilesXY.tileX}&y=${tilesXY.tileY}&z=${this.position.zoom}`;
                const tilesSrc = `https://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=${tilesXY.tileX}&y=${tilesXY.tileY}&z=${this.position.zoom}&scl=2&ltype=3`;
                this.tilesSrc = tilesSrc;
                this.$nextTick(() => {
                    (<any> this).$refs.chatContainerScroll.refresh();
                    setTimeout(() => {
                        (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 1);
                    }, 1000);
                });
                clearPosition();
            }
            return this.position;
        }

        @Watch("storePosition")
        private onChangeStorePosition(n: any): void {
            console.log(n);
        }


        @State("UserStore")
        private user!: InterfaceUser;

        private getChatTargetInfo(): void {
            Http.get(this.api.getChatObjectInfo, {user_id: this.toId}, {token: this.user.token}).then((res) => {
                res.data.avatar = this.userFaceSafeHandle(res.data);
                this.chatTargetInfo = res.data;
                this.getChatLog(true);
            });

        }

        private updated(): void {
            this.$nextTick(() => {
                (<any> this).$refs.chatContainerScroll.refresh();
            });
        }

        private beforeDestroy() {
            this.alwaysBottom = true;
        }


        private mounted() {
            if (this.user.chatStatus < 1) {
                (<any> this).$createToast({
                    time: 2000,
                    txt: "您已被禁言，请准守心相依相关条例，谢谢合作！",
                    type: "warn",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            }
            this.clearNoRead();
            this.getChatGiftList();
            this.$nextTick(() => {
                this.getChatTargetInfo();
                window.addEventListener("native.keyboardshow", (event: any) => {
                    setTimeout(() => {
                        this.alwaysBottom = true;
                        this.tryScrollToBottom();
                    }, 300);
                });


                window.addEventListener("native.keyboardhide", () => {
                    setTimeout(() => {
                        (<any> this).$refs.chatInput.blur();
                        this.alwaysBottom = true;
                        this.tryScrollToBottom();
                    }, 300);
                });
            });
        }

        private getChatGiftList() {
            Http.get(this.api.getGiftList, {}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    //this.giftList = res.data;
                    const giftList: any[] = [];
                    for (let i in res.data) {
                        let startIndex = Number(i) * 8;
                        let endIndex = Number(i) * 8 + 8;
                        let list = res.data.slice(startIndex, endIndex);
                        if (list.length === 0) {
                            break;
                        }
                        giftList.push(list);
                    }
                    this.giftList = giftList;
                }
            });
        }


        private back(): void {
            this.navigateBack();
        }

        private chatInputBlur(): void {
            CommonUnit.windowSizeRecover();
        }

        private chatInputFocus(): void {
            this.showEmotionTool = false;
        }

        private onSubmit(): void {
            if (this.chatText !== "") {
                (<any> this).$refs.chatInput.blur();
                this.socketSendMessage(JSON.stringify({
                    type: "say",
                    data: {
                        toid: this.chatTargetInfo.user_id,
                        to_name: this.chatTargetInfo.nickName,
                        content: String(this.chatText),
                        from_name: this.user.nickname,
                        fromid: this.user.userId,
                        from_avatar: this.user.avatar.file_path
                    },
                    token: this.user.token,
                    toid: this.toId
                }));
                this.chatText = "";
                this.alwaysBottom = true;
            }
        }

        private showLocation(): void {
            this.hideToolsBar();
            this.navigateTo({
                name: "locationInformation"
            });
        }

        private showEmotion(): void {
            this.hideToolsBar(3);
        }

        private showGift(): void {
            this.hideToolsBar(4);
        }


        private hideToolsBar(n: number = 0): void {
            (<any> this).$refs.chatInput.blur();
            if (n > 0) {
                this.toolLevelList = [1, 1, 1, 1, 1];
                this.toolLevelList[n - 1] = 10;
            }
            switch (n) {
                case 1:
                    this.showMicrophoneTool = !this.showMicrophoneTool;
                    this.showEmotionTool = false;
                    this.showGiftTool = false;
                    break;
                case 3:
                    this.showEmotionTool = !this.showEmotionTool;
                    this.showMicrophoneTool = false;
                    this.showGiftTool = false;
                    break;
                case 4:
                    this.showGiftTool = !this.showGiftTool;
                    this.showMicrophoneTool = false;
                    this.showEmotionTool = false;
                    break;
                default:
                    this.showGiftTool = false;
                    this.showMicrophoneTool = false;
                    this.showEmotionTool = false;

            }
        }

        private selectEmotion(emotion: string): void {
            const chatTextArray: string[] = this.chatText.split("");
            const selectionStart: number = (<any> this).$refs.chatInput.selectionStart;
            const selectionEnd: number = (<any> this).$refs.chatInput.selectionEnd;
            if (selectionStart === selectionEnd) {
                chatTextArray.splice(selectionStart, 0, emotion);
            } else {
                chatTextArray.splice(selectionStart, selectionEnd - selectionStart, emotion);
            }
            // (<any> this).$refs.chatInput.selectionStart = chatTextArray.length;
            // (<any> this).$refs.chatInput.selectionEnd = chatTextArray.length;
            this.chatText = chatTextArray.join("");

        }


        private async persistenceMessage(msgId: string, msgData: any): Promise<any> {
            try {
                const result = await Http.post(this.api.saveChatMessage, {...msgData}, {token: this.user.token});
                this.alwaysBottom = true;
                if (result.code) {
                    this.$set(this.chatDetailListObject[msgId], "abnormal", 0);
                } else {
                    this.$set(this.chatDetailListObject[msgId], "abnormal", -1);
                }
            } catch (e) {
                this.$set(this.chatDetailListObject[msgId], "abnormal", -1);
            }
            this.$nextTick(() => {
                this.socketSendMessage(JSON.stringify({type: "pong", timestamp: new Date().getTime()}));
            });
        }

        private async chooseImageFiles(evt: any): Promise<any> {
            const file = evt.target.files[0];
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "正在上传...",
                mask: true
            }).show();
            try {
                const uploadResult = await Http.upload(this.api.imageUpload, {type: "chat", iFile: file}, {token: this.user.token});
                if (uploadResult.code === 1) {
                    toast.hide();
                    this.socketSendMessage(JSON.stringify({
                        type: "say_img",
                        data: {
                            toid: this.chatTargetInfo.user_id,
                            to_name: this.chatTargetInfo.nickName,
                            content: String(`img[${uploadResult.data.file_path}]`),
                            from_name: this.user.nickname,
                            fromid: this.user.userId,
                            from_avatar: this.user.avatar.file_path
                        },
                        token: this.user.token,
                    }));
                    this.alwaysBottom = true;
                } else {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        txt: uploadResult.msg,
                        mask: true,
                        type: "error"
                    }).show();
                }
            } catch (e) {
                toast = (<any> this).$createToast({
                    time: 2000,
                    txt: "网络出错",
                    mask: true,
                    type: "error"
                }).show();
            }
        }

        private selectGift(id: number) {
            this.giftSelectId = id;
        }

        private async giveGift() {
            if (this.giftSelectId >= 0) {
                let toast = (<any> this).$createToast({
                    time: 0,
                    txt: "正在赠送礼物中...",
                    mask: true
                }).show();
                this.alwaysBottom = true;
                try {
                    const result = await Http.post(this.api.placeGiftOrder, {id: this.giftSelectId, user_id: this.toId}, {token: this.user.token});
                    this.hideToolsBar();
                    if (result.code === 1) {
                        this.authentication();
                        toast = (<any> this).$createToast({
                            time: 500,
                            txt: "赠送礼物成功",
                            type: "correct",
                            mask: true
                        }).show();
                    } else {
                        if (this.globalSingleResultToast(result)) {
                            this.navigateTo({
                                name: "mineMoneyRecharge"
                            });
                        }
                    }
                } catch (e) {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        txt: "赠送失败，请稍后重试。。。",
                        mask: true,
                        type: "error"
                    }).show();
                }
            }
        }

        private getChatLog(toBottom: boolean): void {
            Http.post(this.api.getChatLoad, {time: this.loadTime, toid: this.toId, page: this.page, size: this.size}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.alwaysBottom = toBottom;
                    this.page = this.page + 1;
                    const dataList = res.data.data.reverse();
                    this.chatDetailList.push(...dataList);
                    if (dataList.length < this.size && this.chatDetailList.length === 0) {
                        (<any> this).$refs.chatContainerScroll.finishPullDown();
                    }
                    for (let i in dataList) {
                        const chatMessageEntity = this.logToItem(dataList[i]);
                        this.chatDetailListObject = Object.assign(this.chatDetailListObject, chatMessageEntity);
                    }
                    if (toBottom && this.chatDetailList.length !== 0) {
                        this.$nextTick(() => {
                            (<any> this).$refs.chatContainerScroll.refresh();
                            setTimeout(() => {
                                (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 1);
                            }, 1000);
                        });
                    }
                }
            });
            // this.chatLogList
        }

        private logToItem(data: any): any {
            const log: any = {};
            log[data.identification] = {
                abnormal: 0,
                avatar: data.from_avatar + "?imageView2/0/h/50",
                fromId: data.fromid,
                identification: data.identification,
                isSelf: data.fromid === this.user.userId,
                text: ChatMessageUnit.replaceContent(data.content),
                timeStamp: data.time,
                toId: data.toid,
                type: data.type
            };
            if (log[data.identification].type === 2) {
                // log[data.identification].text = log[data.identification].text.file_path;
                // log[data.identification].text = log[data.identification].text.replace('img[','').replace(']','')
            } else if (log[data.identification].type === 4) {
                log[data.identification].type = 101;
                // log[data.identification].text = log[data.identification].content;
            }
            return log;

        }

        private clearNoRead(): void {
            Http.post(this.api.changeNoRead, {user_id: this.toId}, {token: this.user.token});
        }

        private tryScrollToBottom(): void {
            (<any> this).$refs.chatContainerScroll.refresh();
            if (this.alwaysBottom) {
                this.$nextTick(() => {
                    setTimeout(() => {
                        (<any> this).$refs.chatContainerScroll.scrollToElement(document.getElementById("msgEnd"), 0, false, false);
                    }, 100);
                });
            }
        }

        private clickFace(self: boolean): void {
            if (!self) {
                this.navigateTo({
                    name: "friendInfo",
                    query: {friendId: this.chatTargetInfo.user_id}
                });
            }
        }

        private toChatLog(): void {
            this.navigateTo({
                name: "chatLog",
                query: {
                    friendId: this.chatTargetInfo.user_id
                }
            });
        }

        private clickMsg(key: string): void {
            const msg = this.chatDetailListObject[key];
            if (String(msg.type) === "2") {
                (<any> this).$createImagePreview({
                    imgs: [msg.text]
                }).show();
            }
        }

        private socketReconnect(): void {
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "正在重新连接服务...",
                mask: true
            }).show();
            (<any> this).$disconnect();
            try {
                setTimeout(() => {
                    (<any> this).$connect();
                    toast.hide();
                }, 1000);
            } catch (e) {
                toast.hide();
            }

        }

        private showPhoto(sourceType: string = "CAMERA"): void {
            if (this.devide.status) {
                let toast = (<any> this).$createToast({
                    time: 0,
                    txt: sourceType === "CAMERA" ? "初始化相机" : "打开系统相册",
                    mask: true
                }).show();
                var cameraOptions = {
                    quality: 75,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: sourceType === "CAMERA" ? Camera.PictureSourceType.CAMERA : Camera.PictureSourceType.PHOTOLIBRARY,     //照相机类型
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    saveToPhotoAlbum: false
                };
                (<any> navigator).camera.getPicture((img: string) => {
                    toast = (<any> this).$createToast({
                        time: 0,
                        txt: "正在上传",
                        mask: true
                    }).show();

                    Http.uploadNative(this.api.imageUpload, img, {type: "chat"}, {token: this.user.token}).then((res) => {
                        if (res.code === 1) {
                            toast.hide();
                            this.socketSendMessage(JSON.stringify({
                                type: "say_img",
                                data: {
                                    toid: this.chatTargetInfo.user_id,
                                    to_name: this.chatTargetInfo.nickName,
                                    content: String(`img[${res.data.file_path}]`),
                                    from_name: this.user.nickname,
                                    fromid: this.user.userId,
                                    from_avatar: this.user.avatar.file_path
                                },
                                token: this.user.token,
                            }));
                            // this.chatText = "";
                            this.alwaysBottom = true;

                            // this.socketSendMessage(JSON.stringify({type: "say_img", content: String(res.data.id), token: this.user.token, toid: this.toId}));
                        } else {
                            toast = (<any> this).$createToast({
                                time: 2000,
                                txt: res.msg,
                                mask: true,
                                type: "error"
                            }).show();
                        }
                    }).catch((e: any) => {
                        toast = (<any> this).$createToast({
                            time: 2000,
                            txt: "网络出错",
                            mask: true,
                            type: "error"
                        }).show();
                    });
                }, (e: any) => {
                    toast.hide();
                }, cameraOptions);
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background $theme-page-chat-background-color;
        overflow hidden;
        position relative;

        .nav-target-face
            width 33px;
            height 33px;
            margin-top 6px;
            border-radius 30px;

            .nav-target-face-image
                background-position center;
                background-size cover;
                width 33px;
                height 33px;
                border-radius 30px;

    .chat-container
        width 100vw;
        height calc(100% - 102px - var(--safe-area-inset-bottom));
        padding calc(44px + var(--safe-area-inset-top)) 0 0;
        overflow hidden;
        transition transform .3s ease-in-out;
        position relative;

        .msg-end
            height 4px;
            display block;

    .chat-container-up
        transform translateY(-210px)

    .chat-tools
        background #eff2fb;
        /*height 102px;*/
        height calc(312px + var(--safe-area-inset-bottom));
        /*overflow hidden;*/
        bottom 0;
        width 100vw;
        left 0;
        padding-bottom var(--safe-area-inset-bottom);
        transition transform .3s ease-in-out, height .3s ease-in-out;;

    .chat-tools-disable
        position absolute;
        height 102px;
        width 100vw;
        background rgba(230, 230, 230, 0);
        bottom 0;
        left 0;
        z-index 100;

    .chat-tools-input
        height 55px;
        padding 10px 10px 0 10px;

        .chat-tools-form
            position relative;

            .chat-msg-submit
                width 60px;
                display flex;
                align-items center;
                justify-content center;
                background $theme-common-color;
                color #fff;
                height 30px;
                position absolute;
                border-radius 44px;
                font-size 12px;
                right 10px;
                top 7px;

        input
            width 100%;
            height 44px;
            box-sizing border-box;
            padding 5px 75px 5px 15px;
            word-break break-all;

        .chat-tools-input-wrap
            border-radius 55px;
            overflow hidden;

            &::after
                display none

    .chat-tools-other
        height calc(47px + var(--safe-area-inset-bottom));
        padding-bottom var(--safe-area-inset-bottom);
        display flex;
        justify-content center;

        .chat-tools-other-item
            flex 1;
            font-size 23px
            display flex;
            align-items center;
            justify-content center;
            color #989db1;

            i
                position relative;
                font-size 23px;
                overflow hidden;

    .chat-tool-box
        width 100vw;
        height calc(210px + var(--safe-area-inset-bottom));
        position relative;

    .chat-emoji-tool, .chat-micro-tool
        height calc(210px + var(--safe-area-inset-bottom));
        background #fff

    .chat-fixed-tool
        position absolute;
        top 0
        left 0;
        right 0;

    .chat-tools-unfold
        height calc(312px + var(--safe-area-inset-bottom));
        padding-bottom var(--safe-area-inset-bottom);
        transform translateY(-210px);

        .chat-tools-other
            height 47px;
            padding-bottom 0;

    .chat-tools-other-item-active
        i
            color $theme-common-color;

    .chat-micro-tip
        height 55px;
        line-height 55px;
        text-align center;
        font-size 14px;
        color #808080;

    .chat-micro-icon
        height 110px;
        width 110px;
        margin auto;
        background $theme-common-color;
        border-radius 110px;
        display flex;
        justify-content center;
        align-items center;
        position relative;
        overflow hidden;

        i.iconfont
            font-size 44px;
            color #fff;


    .chat-micro-fee
        height 45px;
        color #999;
        font-size 12px;
        line-height 45px;
        text-align center;


    .chat-micro-mark
        position absolute;
        height 110px;
        width 110px;
        bottom calc(210px - 55px - 110px);
        left 50%;
        margin-left -55px;
        z-index 200;
        border-radius 110px;
        overflow hidden;

    .chat-micro-mark-active
        position absolute;
        height 100vh;
        width 100vw;
        top 0;
        left 0;
        margin 0 !important;
        z-index 200;
        border-radius 0 !important;

        .chat-micro-mark-translucence
            height calc(100vh - 210px);
            background rgba(0, 0, 0, .3);

        .chat-micro-action-btn
            width 60px;
            height 60px;
            background #f2f3f7;
            border-radius 60px;
            display flex;
            align-items center;
            justify-content center;
            color #888b9e;
            position absolute;
            right 30px;
            bottom calc(210px - 55px - 30px - 55px);

            i.iconfont
                font-size 24px;
                font-weight 700;

        .chat-micro-action-current
            background #d9dadc;

    .picker-gift-show
        transform translateY(0) !important;

    .picker-gift
        height calc(312px + var(--safe-area-inset-bottom));
        background #fff;
        position absolute;
        width 100vw;
        bottom 0;
        left 0;
        z-index 200 !important;
        transform translateY(100%);
        transition all .3s ease-in-out;

        .picker-gift-head
            height 45px;
            display flex;
            justify-content center;
            align-items center;
            color $theme-common-color;

        .picker-gift-wrap
            height 204px;

            .picker-gift-box
                width 100vw;
                height 204px;
                overflow hidden;
                position relative;
                display flex;
                flex-wrap wrap;

                >>> .horizontal-scroll-list-wrap
                    width 100vw;

                    .cube-scroll-content
                        display inline-block;

                        .list-wrapper
                            padding-bottom 10px;
                            white-space nowrap;

                            .item-outer
                                flex-wrap wrap;
                                width 100vw;

                                .gift-item
                                    width calc(25vw - 10px);
                                    height 92px;
                                    position relative;
                                    display flex;
                                    justify-content space-between;
                                    align-items center;
                                    margin 5px;
                                    padding 4px 7px;
                                    box-sizing border-box
                                    flex-direction column;
                                    border-radius 5px;


                                    img.gift-picture
                                        height 45px;
                                        width 45px;
                                        display block;

                                    .gift-name
                                        color #878787;
                                        margin-top 2px
                                        font-size 12px;
                                        width calc(25vw - 10px);
                                        text-align center;

                                    .gift-price
                                        color #c1c1c1;
                                        font-size 12px;
                                        line-height 20px;

                                        &::before
                                            padding-right 2px;
                                            font-size 11px;

                .gift-item-selected
                    border 1px solid $theme-advancing-color;
                    padding 6px !important;


        .picker-gift-action
            height calc(63px + var(--safe-area-inset-bottom));
            padding 0 10px;
            padding-bottom var(--safe-area-inset-bottom);
            display flex;
            justify-content space-between;
            align-items center;

            .number
                padding-right 5px;

                &::before
                    font-size 14px;
                    padding-right 4px;
                    color #aaa;

            .recharge
                padding-right 3px;

            .picker-gift-balance
                color #777777;

            .picker-gift-btn
                background $theme-thin-color;
                height 35px;
                line-height 35px;
                width 120px;
                border-radius 35px;
                color #fff;
                text-align center;
                transition background .2s ease-in-out;

            .picker-gift-btn-active
                background $theme-common-color

    .msg-status
        height 30px;
        display flex;
        align-items flex-end;

    .input-choose-picture
        font-size 0;
        position absolute;
        width 25px;
        height 25px;
        left 0;
        top 0;
        z-index 21;
        opacity 0;

    .msg-gift-content
        width 50vw;

        .msg-gift-picture
            width 50vw;
            position relative;

            img
                width 100%;
                height auto

        .msg-gift-text
            position relative;
            width 50vw;
            font-size 13px;
            background-image -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
            color transparent;
            background-clip text;

            span
                padding 0 2px;
                font-weight 700;

    .chat-log-wrap
        display flex;
        flex-direction column;

        .chat-log-flex
            padding-top 20px;
            height auto;
            width 100vw;

    .socket-disconnect
        width 100vw;
        height 40px;
        background rgba(255, 215, 0, .9);
        color #333;
        position absolute;
        top calc(44px + var(--safe-area-inset-top));
        left 0;
        z-index 100;
        display flex;
        align-items center;
        justify-content center;
        font-size 15px;

    .chat-title
        height 44px;
        width 60vw;
        display flex;
        justify-content center;
        align-items center;
        flex-direction column

        .chat-name
            height 30px;
            line-height 30px;
            text-align center

        .chat-sub
            margin-top -2px
            height 14px;
            line-height 10px;
            font-size 11px;
            text-align center
            color #fa436a
</style>
